import 'package:clipboard/clipboard.dart';
import 'package:flutter/material.dart';

import '../data/mock_data.dart';

class ProdDetailsDetails extends StatelessWidget {
  const ProdDetailsDetails({super.key, this.img = '' });
  final String img;

  @override
  Widget build(BuildContext context) {
    // 获取状态栏高度
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double navBarHeight = MediaQuery.of(context).padding.bottom;
    return Stack(
      children: [
        // 背景图
        Positioned(
          left: 0,
          right: 0,
          top: 0,
          height: 376,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(img),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        // 顶部按钮
        Positioned(
          left: 0,
          right: 0,
          top: statusBarHeight + 18,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 返回
                Container(
                  width: 28,
                  height: 28,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.75),
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: IconButton(
                    onPressed: (){
                      Navigator.pop(context);
                    },
                    iconSize: 16,
                    color: Colors.black,
                    tooltip: "返回",
                    padding: EdgeInsets.all(0),
                    alignment: Alignment.center,
                    splashRadius: 6,
                    icon: Icon(Icons.arrow_back_ios_new),
                  ),
                ),
                // 更多
                Container(
                  width: 28,
                  height: 28,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.75),
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: IconButton(
                    onPressed: (){},
                    iconSize: 16,
                    color: Colors.black,
                    tooltip: "更多菜单",
                    padding: EdgeInsets.all(0),
                    alignment: Alignment.center,
                    splashRadius: 6,
                    icon: Icon(Icons.more_vert_outlined),
                  ),
                ),
              ],
            ),
          ),
        ),
        // 详情页
        Positioned(
          top: 320,
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16)
              ),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(20, 16, 20, 64 + navBarHeight),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("VIRTUALLY",
                        style: TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.w700,
                          color: Color(0xFF141519),
                          decoration: TextDecoration.none,
                        ),
                      ),
                      Text("Public sale",
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w300,
                          color: Color(0xFF86909C),
                          decoration: TextDecoration.none,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 8),
                  Row(
                    children: [
                      Container(
                        height: 20,
                        padding: EdgeInsets.symmetric(horizontal: 5),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(4),
                            bottomLeft: Radius.circular(4),
                          ),
                        ),
                        child: Text("Draw", style: TextStyle(fontSize: 13, color: Colors.white, decoration: TextDecoration.none)),
                      ),
                      SizedBox(width: 1),
                      Container(
                        height: 20,
                        padding: EdgeInsets.symmetric(horizontal: 5),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: Color(0xFF325EF6),
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(4),
                            bottomRight: Radius.circular(4),
                          ),
                        ),
                        child: Text("99 copies", style: TextStyle(fontSize: 13, color: Colors.white, decoration: TextDecoration.none)),
                      ),
                    ],
                  ),
                  SizedBox(height: 11),
                  // 使用 flex 布局撑满剩余空间，然后子元素设置宽高为最大值，这样 ListView 就是撑满 Container 的空间
                  Expanded(
                    flex: 1,
                    child: SizedBox(
                      width: double.infinity,
                      height: double.infinity,
                      child: ListView(
                        padding: EdgeInsets.symmetric(vertical: 0),
                        scrollDirection: Axis.vertical,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                child: Container(
                                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                                  decoration: BoxDecoration(
                                    color: Color(0xFFF0F0F0),
                                    borderRadius: BorderRadius.circular(8)
                                  ),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text("Creator", style: TextStyle(color: Color(0xFF86909C), fontSize: 14, decoration: TextDecoration.none)),
                                      SizedBox(height: 12),
                                      Row(
                                        children: [
                                          Container(
                                            height: 32,
                                            width: 32,
                                            decoration: BoxDecoration(
                                              borderRadius: BorderRadius.circular(16),
                                              image: DecorationImage(
                                                image: NetworkImage(MockData.iconList[0]),
                                                fit: BoxFit.cover,
                                              ),
                                            ),
                                          ),
                                          SizedBox(width: 8),
                                          Text("Stephen", style: TextStyle(color: Colors.black,fontSize: 15, fontWeight: FontWeight.w700, decoration: TextDecoration.none)),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              SizedBox(width: 8),
                              Expanded(
                                child: Container(
                                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                                  decoration: BoxDecoration(
                                    color: Color(0xFFF0F0F0),
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text("holder", style: TextStyle(color: Color(0xFF86909C), fontSize: 14, decoration: TextDecoration.none)),
                                      SizedBox(height: 12),
                                      Row(
                                        children: [
                                          Container(
                                            height: 32,
                                            width: 32,
                                            decoration: BoxDecoration(
                                              borderRadius: BorderRadius.circular(16),
                                              image: DecorationImage(
                                                image: NetworkImage(MockData.iconList[1]),
                                                fit: BoxFit.cover,
                                              ),
                                            ),
                                          ),
                                          SizedBox(width: 8),
                                          Text("Pheaio", style: TextStyle(color: Colors.black,fontSize: 15, fontWeight: FontWeight.w700, decoration: TextDecoration.none)),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 12),
                          // TokenID
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                flex: 1,
                                child: SelectableText(
                                  "Token ID：${MockData.Blockchain}",
                                  maxLines: 1,
                                  style: TextStyle(
                                    fontSize: 12,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black,
                                    overflow: TextOverflow.ellipsis,
                                    decoration: TextDecoration.none,
                                  ),
                                ),
                              ),
                              IconButton(
                                onPressed: () {
                                  FlutterClipboard.copy(MockData.Blockchain).then((value) => {
                                    ScaffoldMessenger.of(context).showSnackBar(
                                      SnackBar(
                                        content: Text('已复制到剪切板')
                                      ),
                                    )
                                  });
                                },
                                icon: Icon(Icons.content_copy, size: 16)
                              ),
                            ],
                          ),
                          SizedBox(height: 20),
                          Container(
                            padding: EdgeInsets.all(16),
                            margin: EdgeInsets.only(bottom: 8),
                            decoration: BoxDecoration(
                              color: Color(0xFFF4F5FA),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("Collection Description", style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w800, decoration: TextDecoration.none)),
                                SizedBox(height: 8),
                                Text("Trendy Gorilla Trendy Clothing Mask Gorilla Digital Avatar", style: TextStyle(fontSize: 14, fontWeight: FontWeight.w300, color: Color(0xFF86909C), decoration: TextDecoration.none)),
                              ],
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(16),
                            margin: EdgeInsets.only(bottom: 8),
                            decoration: BoxDecoration(
                              color: Color(0xFFF4F5FA),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("Art Introduction", style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w800, decoration: TextDecoration.none)),
                                SizedBox(height: 8),
                                Text("soar up, but only a few steps down, soaring between the fluffy wormwood. This is also where I fly, and that is where Xi Shi is?", style: TextStyle(fontSize: 14, fontWeight: FontWeight.w300, color: Color(0xFF86909C), decoration: TextDecoration.none)),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        // 底部按钮
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            width: double.infinity,
            padding: EdgeInsets.only(left: 16, top: 8, right: 16, bottom: 0),
            decoration: BoxDecoration(
              // color: Colors.red,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
              border: Border(
                top: BorderSide(
                  color: Color(0xFFF0F0F0),
                ),
              ),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("￥5200", style: TextStyle(color: Color(0xFF141519), fontSize: 24, fontWeight: FontWeight.w700, decoration: TextDecoration.none)),
                SizedBox(width: 40),
                Expanded(
                  flex: 1,
                  child: SizedBox(
                    height: 64,
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ButtonStyle(
                        backgroundColor: WidgetStateProperty.all(Color(0xFF325EF6)),
                        // WidgetStateProperty<OutlinedBorder?>?
                        shape: WidgetStateProperty.all(RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        )),
                      ),
                      child: Text("Buy Now", style: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.w700)),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}
